<template>
  <div>
    <van-cell-group>
      <van-cell to="addfriends" title="新的朋友" icon="add" />
      <van-cell to="groupChat" title="群聊" icon="wechat" />
      <van-cell to="" title="标签" icon="star" />
      <van-cell to="" title="公众号" icon="manager" />
    </van-cell-group>
      <br>
    <van-cell-group v-for="item in userList">
      <van-cell :value="item.nickname" label="描述信息" center @click="userInfo(item)">
        <template #icon>
          <img :src="item.headImg" alt >
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import {getUserList} from '@/api/request/login.js'

export default {
  data() {
    return {
      userList: []
    };
  },
created() {
  this.getUserList();
},
  methods: {
    getUserList() {
      getUserList({
        pageNo: 1,
        pageSize: 20,
      }).then(res => {
          this.userList = res.data.data;
      }).catch(err => {
          console.log(err);
      })
    },
    userInfo(value) {
      localStorage.setItem('friendDetail', JSON.stringify(value));
      this.$router.push({
        name:'friendDetail',
        params: value,
        });
    },
    delChat() {
      console.log('删除该用户的聊天窗口');
    }
  },
}
</script>

<style scoped>
body{
  background-color: #f8f8f8;
}
img{
  height: 40px;
  width: 40px;
  margin-right: 10px;
}
</style>